<template>
    <div class="login">
        <div class="login-box">
            <div style='overflow: hidden'>
                <div style='float:left'>
                    <img src="../../../images/logo.png" style='height:38px'>
                </div>
                <div style='float:right;display:flex;cursor:pointer;font-size:20px;font-weight: 500'>
                    <div style='margin-right: 40px;'>
                        <span style='color:#06A0FD;'>登录</span>
                        <div style='width:12px;height:3px;background-color:#06A0FD;margin:0 auto'></div>
                    </div>
                    <div>
                        <router-link to='/home/public/register'>
                            <span style='color:#464C5B;'>注册</span>
                        </router-link>
                    </div>
                </div>
            </div>
            <div style='width:320px;margin:80px auto'>
                <div class='input-text' :class='{"input-text-color":isFocus=="1"}'>
                    <i class='iconfont icon-icon-test32'></i>
                    <Input class='input-border' v-model='phone' placeholder="请输入手机号" @on-focus='inputFocus(1)' @on-blur='isFocus=0'></Input>
                </div>
                <div class='input-text' :class='{"input-text-color":isFocus=="2"}'>
                    <i class='iconfont icon-icon-test29'></i>
                    <Input :type='showPassword ? "text" : "password"' class='input-border' v-model='password' placeholder="请输入密码" @on-focus='inputFocus(2)' @on-blur='isFocus=0'></Input>
                    <Icon :type="showPassword ? 'eye' : 'eye-disabled'" style='cursor: pointer;margin-right: 0' @click.native='showPassword=!showPassword'></Icon>
                </div>
                 <!-- <div class='input-text' style='position: relative' :class='{"input-text-color":isFocus==3}'>
                    <i class='iconfont icon-icon-test27'></i>
                    <Input class='input-border' v-model='code' placeholder="请输入验证码" @on-focus='inputFocus(3)' @on-blur='isFocus=0' @on-enter="login"></Input>

                    <i class="captchaImage" v-html="captchaSvg" @click="changeCaptcha"></i>
                </div> -->
                <div id='captcha' style='margin-top: 15px;'></div>
                
                <div style='text-align:right;position:relative;'>
                    <div style='position:absolute;right:0;top:10px;color:#6571810;cursor:pointer'>
                        <span @click='findPassword'>忘记密码？</span>
                    </div>
                </div>
                <div style='position:relative;top:48px;width:320px'>
                    <button class='btn-login' @click='login'>登录</button>
                    <i class='iconfont icon-iconfontjiantou5 btn-arrow' style='font-size:30px'></i>
                </div>
            </div>
        </div>
       <!--  <div v-if='geetest'>
            <div class='geetest-mask' @click.stop='geetestClose'></div>
            <div id='captcha'></div>
        </div> -->
    </div>
</template>
<script>
    export default{
        data(){
            return {
                phone: '',
                password: '',
                captchaSvg: '',
                captchaUuid: '',
                isFocus:0,
                geetest:false,
                result:{
                    geetest_challenge:'',
                    geetest_validate:'',
                    geetest_seccode:'',
                },
                captchaObj:{},
                showPassword:false
            }
        },
        created(){
            this.$localStorage.remove('Token');
            this.$localStorage.remove('BaasToken');
            this.fetch('/home/geetest?t='+(new Date()).getTime()).then(res=>{
                if(res&&res.data.data){
                    let data = res.data.data;
                     initGeetest({
                        // 以下 4 个配置参数为必须，不能缺少
                        gt: data.gt,
                        challenge: data.challenge,
                        offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                        new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                        product: "popup", // 产品形式，包括：float，popup
                        width: "320px"
                    }, (captchaObj)=>{
                        this.geetest = true;
                        captchaObj.appendTo('#captcha');
                        this.captchaObj = captchaObj;

                        captchaObj.onSuccess( ()=> {

                            this.result = captchaObj.getValidate();
                         })  
                    });
                }
            })
        },
        methods: {
            login(){
                if (!this.phone) {
                    this.$Message.info('请输手机号');
                    return;
                }
                if(!(/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i.test(this.phone))){
                     this.$Message.info('手机号输入有误');
                     return;
                }
                if (!this.password) {
                    this.$Message.info('请输入密码');
                    return;
                }

                this.fetch('/home/login', {
                    phone: this.phone,
                    password: this.password,
                    geetestChallenge: this.result.geetest_challenge,
                    geetestValidate: this.result.geetest_validate,
                    geetestSeccode: this.result.geetest_seccode,
                    
                }).then((res) => {
                    if (res && res.data.data && res.data.code) {
                        this.$localStorage.set('Token', res.data.data.token);
                        this.$router.push('/home/index/app');
                    }else{
                        this.captchaObj.reset();
                        this.result = {}
                    }
                });
               
            },
            findPassword(){
                this.$router.push('/home/public/password');
            },
            inputFocus(type){
                this.isFocus = type;
            }
        }
    }
</script>
<style>
    .login {
        width: 100%;
        height: 100%;
        background: #fafafa;
    }

    .login-box {
        /*height:510px;*/
        /*margin: 10% auto;*/
        width: 760px;
        height:550px;
        position:absolute;  
        left:50%;  
        top:50%;  
        margin:-275px 0 0 -380px;
        background-color: #fff;
        box-shadow: 0 0 50px rgba(0, 0, 0, .2);
        padding:30px 40px 0 30px;
    }
    .input-text{
        border-bottom: 2px solid #e3e8ee;
        width:320px;
        padding:10px 10px 2px;
        display: flex;
        font-size: 20px;
    }
    .input-text i{
        font-size:30px;
        margin-right:5px;
        line-height: 49px;
        color:#9ea7b4;
    }
    .input-text-color{
        border-bottom: 2px solid rgba(6,160,253,.2);
    }
    .input-text input::-webkit-input-placeholder {
        font-size: 12px;
    }

    .input-border .ivu-input{
        border:none;
        outline: none;
        margin-top: 5px;
        font-size: 20px;
        color: #1c2438
    }
    .input-border .ivu-input:focus,
    .input-border .ivu-input:hover 
    {
        box-shadow: 0 0 0 0 #fff;
    }
    .input-border .ivu-input::-webkit-input-placeholder {
         font-size: 16px;
         color:#657180;
    }
    .btn-login{
        width:320px;
        height:46px;
        line-height: 46px;
        border-radius:30px;
        background-color:#06A0FD;
        color:#fff;
        font-size:20px;
    }
    .btn-arrow{
        position:absolute;
        right:10px;
        top:2px;
        font-size:30px;
        color:#fff;
    }
    .captchaImage{
        position: absolute;
        right:-4px;
    }
    .geetest-mask{
        position:fixed;
        top:0;
        left:0;
        bottom:0px;
        right:0;
        z-index:999;
        background:rgba(0,0,0,0.6)
    }
</style>
